<!DOCTYPE html>

<html>
	<head>
		<title>Geometry</title>
		<script type="text/javascript" src="../libs/three.js"></script>
		<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
		<script type="text/javascript" src="../libs/stats.js"></script>
		<script type="text/javascript" src="../libs/dat.gui.js"></script>
		<style >
			body{
				/* set margin to 0 and overflow to hidden, to use the complete page */

				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>

		<!-- Div which will hold the Output -->
		<div id="WebGL-output">
		</div>

		<!-- Div which will show the stats -->
		<div id="Stats-output">
		</div>

		<!-- Javascript code that runs our Three.js examples -->
		<script type="text/javascript">
			//once everything is loaded, we run our Three.js stuff.
			$(function () { 
 				var stats = initStats();
 				
 				//here we'll put the Three.js stuff
 				var scene = new THREE.Scene();
 				
 				//add camera and renderer
 				var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 				
 				var renderer = new THREE.WebGLRenderer();
 				renderer.setClearColor(0xEEEEEE, 1.0);
 				renderer.setSize(window.innerWidth, window.innerHeight);
 				renderer.shadowMapEnabled = true;

 				//add Light
 				var ambientLight = new THREE.AmbientLight(0x5c5c5c);
 				scene.add(ambientLight);

 				var spotLight = new THREE.SpotLight(0xffffff);
 				spotLight.castShadow = true;
 				spotLight.position.set(-40, 60, -10);
 				scene.add(spotLight);

 				//add plane
 				var planeGeo = new THREE.PlaneGeometry(60,40,1,1);
 				var planeMtr = new THREE.MeshLambertMaterial({color: 0xffffff});
 				var plane = new THREE.Mesh(planeGeo, planeMtr);
 				plane.rotation.x = -0.5 * Math.PI;
		        plane.position.x = 0;
		        plane.position.y = 0;
		        plane.position.z = 0;
		        plane.receiveShadow = true;
		        scene.add(plane);


		        camera.position.x = -30;
		        camera.position.y = 40;
		        camera.position.z = 30;
		        camera.lookAt(scene.position);
		        document.getElementById("WebGL-output").appendChild(renderer.domElement);

		        // assign two materials
	            var meshMaterial = new THREE.MeshNormalMaterial();
	            meshMaterial.side = THREE.DoubleSide;
	            var wireFrameMat = new THREE.MeshBasicMaterial();
	            wireFrameMat.wireframe = true;

	            //add geometries
	            //simple example. For more,to see the learning-threejs chapter 5 examples
	            var planeGeom = new THREE.PlaneGeometry(10, 10, 2, 2);
	            var circleGeom = new THREE.CircleGeometry(3, 10, 0, 2 * Math.PI);
	            var ringGeom = new THREE.RingGeometry(10, 8, 5, 5, Math.PI);
	            var boxGeom = new THREE.BoxGeometry(10, 10, 10, 5, 5, 5);
	            var sphereGeom = new THREE.SphereGeometry(10, 20, 20);
	            var cylinderGeom = new THREE.CylinderGeometry(5, 10, 10, 20);
	            var torusGeom = new THREE.TorusGeometry(5, 5, 5, 5, 1.5 * Math.PI);

	            function makeMesh(geom){
	            	var _mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
	            	_mesh.position.y = 10;
	            	_mesh.name = "mesh";
	            	scene.remove(scene.getObjectByName("mesh"));
	            	scene.add(_mesh);
	            	return _mesh;
	            }

	            var mesh = makeMesh(boxGeom);
	            

	            var controls = new function() {
	            	this.geom = "box";
	            	this.rotation = true;
	            }

	            var gui = new dat.GUI();
	            gui.add(controls, "geom", ["plane", "circle", "ring", "box", "sphere", "cylinder", "torus"]).onChange(function (e){
	            	switch(e){
	            		case "plane":
	            			mesh = makeMesh(planeGeom);
	            			break;
	            		case "circle":
	            			mesh = makeMesh(circleGeom);
	            			break;
	            		case "ring":
	            			mesh = makeMesh(ringGeom);
	            			break;
	            		case "box":
	            			mesh = makeMesh(boxGeom);
	            			break;
	            		case "sphere":
	            			mesh = makeMesh(sphereGeom);
	            			break;
	            		case "cylinder":
	            			mesh = makeMesh(cylinderGeom);
	            			break;
	            		case "torus":
	            			mesh = makeMesh(torusGeom);
	            			break;
	            	}
	            });
	            gui.add(controls, "rotation");

           		
 				//add animation
 				step = 0.02
 				render();
 				function render(){
 					stats.update();

 					if(controls.rotation){
 						mesh.rotation.y += step;	
 					}
 					

 					requestAnimationFrame(render);
 					renderer.render(scene, camera);
 				};

			});

			function initStats(){
				var stats = new Stats();
				stats.setMode(0);
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.lefe = '0px';
				stats.domElement.style.top = '0px';
				$("#Stats-output").append(stats.domElement);
				return stats;
			}

		</script>

	</body>
</html>